<template>
<div class="root-box" id="root-box">
  <el-container>
    <el-aside width="200px">
      <!--左侧树-->
      <el-input
        placeholder="回车搜索"
        v-model="filterText"
        @keyup.enter.native="filterNodeEnter"
        @clear="filterNodeEnter"
        clearable
      >
      </el-input>
      <el-tree
              :data="treeData"
              :props="propTreeProps"
               node-key="id"
               :filter-node-method="filterNode"
               :show-checkbox="propTreeShowCheckbox"
               ref="treeLeft"
               @node-click="treeLeftNodeClick"
        :expand-on-click-node="false"
        highlight-current
      ></el-tree>
    </el-aside>
    <!--主要区域-->
    <el-main>
      <data-view
        ref="dataviewRight"
        propViewKey="sys_user"
        propViewForm="base/staff/detail.vue"
        :propAutoFetchData="false"
        :propOnlyQuery="propOnlyQuery"
      />
    </el-main>
  </el-container>
</div>
</template>

<script>
/*eslint-disable*/
/*树+列表 选择或者编辑，未完全实现，暂时不可用*/
export default {
  name: 'FortenTreeList',
  props: {
    //树显示属性
    propTreeProps:{
      type: Object,
      default:  ()=>{
        return {
          label: 'label',
          children: 'children',
          isLeaf: 'leaf'
        }
      }
    },
    //树查询地址
    propQueryUrl:{
      type: String,
      default: 'office/list'
    },
    //节点唯一标识字段名称
    propFieldNodeId:{
      type: String,
      default: 'id'
    },
    //节点显示字段名称
    propFieldLabel:{
      type: String,
      default: 'name'
    },
    //节点显示复选框
    propTreeShowCheckbox:{
      type: Boolean,
      default: false
    },
    //节点显示复选框
    propOnlyQuery:{
      type: Boolean,
      default: false
    }
  },
  created() {
    this.loadNode(0)
  },
  data() {
    return {
      filterText: '',
      defaultExpandedKeys: [],
      treeData: []
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value || !data || data.nodeId < 1) return true;
      let hit = data.label.indexOf(value) !== -1
      if (hit) {
        this.defaultExpandedKeys.push(data.nodeId)
      }
      return hit
    },
    filterNodeEnter() {
      this.$refs.treeLeft.filter(this.filterText)
    },

    //加载树节点方法
    loadNode(parentId) {
      let wrapper = this.$newWrapper()
      const params = {
        queryString: utilVue.json2str(wrapper.queryConditions),
        orderString: null
      }
      let periodOb ={}
      this.$ajax.get(this.propQueryUrl, {params}).then(resp => {
        if (resp.code == 0 ) {
          this.treeData = global.utils.convertToTree(resp.data, {
            rootNode: {
              id: 0,
              parentId: 0,
              name: '根节点'
            },
            keyFieldName: 'id',
            parentFieldName: 'parentId',
            labelFieldName: 'name'
          })
        }
      })
    },

    //左侧树节点点击
    treeLeftNodeClick(ob, node, that) {
      let wrapper = this.$newWrapper()
      if (ob.id > 1) wrapper.eq('officeId',ob.id )
      this.$refs.dataviewRight.setQueryWrapper(wrapper)
    }
  }
}
</script>

<style lang="scss">
  .root-box{
    .el-aside{
      background: none;
    }
  }
</style>
